import { Button, Input, Pagination, Select, Space, Table } from "antd";
import { Link, Route } from "react-router-dom";
import { renderRoutes } from "react-router-config";
import { useCallback, useEffect, useState } from "react";
import { fetch } from "../../api/addgoods";
const PAGE_SIZE = 10; // 每页显示的数据条数
const pageSizeOptions = ["5", "10", "20"]; // 可选的每页显示条数
function ManagerContent() {
  const onChange1 = useCallback((value) => {
    console.log(value);
  }, []);
  const onChange2 = useCallback((value) => {
    console.log(value);
  }, []);
  const onChange3 = useCallback((value) => {
    console.log(value);
  }, []);
  const [currentPage, setCurrentPage] = useState(1);
  const [pageSize, setPageSize] = useState(PAGE_SIZE);
  const [data, setData] = useState([]);
  useEffect(() => {
    const fetchData = async () => {
      const response = await fetch();
      setData(response.data);
    };
    fetchData();
  }, []); // 在组件加载时触发数据获取
  const handlePageChange = (page, pageSize) => {
    setCurrentPage(page);
    setPageSize(pageSize);
  };
  const paginationConfig = {
    current: currentPage,
    pageSize: pageSize,
    total: data.length,
    showSizeChanger: true,
    pageSizeOptions: pageSizeOptions,
    onChange: handlePageChange,
    onShowSizeChange: handlePageChange,
  };
  const columns = [
    { title: "商品ID", dataIndex: "_id", key: "_id" },
    { title: "商品标题", dataIndex: "title", key: "title" },
    { title: "品种", dataIndex: "variety", key: "variety" },
    {
      title: "储存条件",
      dataIndex: "storageCondition",
      key: "storageCondition",
    },
    { title: "规格", dataIndex: "specifications", key: "specifications" },
    { title: "商品分类", dataIndex: "category", key: "category" },
    { title: "推荐", dataIndex: "recommended", key: "recommended" },
    { title: "商品原价", dataIndex: "originalPrice", key: "originalPrice" },
    { title: "商品现价", dataIndex: "currentPrice", key: "currentPrice" },
    { title: "商品状态", dataIndex: "state", key: "state" },
    {
      title: "操作",
      key: "operate",
      render: () => (
        <Space size="middle">
          <span>商品详情</span>
          <span>立即下架</span>
        </Space>
      ),
    },
  ];

  const paginatedData = data.slice(
    (currentPage - 1) * pageSize,
    currentPage * pageSize
  );
  return (
    <>
      <div>
        <Input placeholder="商品ID/商品标题/品种" style={{ width: "30vh" }} />
        <Select
          placeholder="商品状态"
          onChange={onChange1}
          style={{ margin: "20px 10px 0 10px", width: "30vh" }}
          options={[
            {
              value: "已上架",
              label: "已上架",
            },
            {
              value: "已下架",
              label: "已下架",
            },
            {
              value: "未上架",
              label: "未上架",
            },
          ]}
        />
        <Select
          placeholder="储存条件"
          onChange={onChange2}
          style={{ margin: "20px 10px 0 0", width: "30vh" }}
          options={[
            {
              value: "冷藏",
              label: "冷藏",
            },
            {
              value: "常温",
              label: "常温",
            },
          ]}
        />
        <Space.Compact>
          <Input placeholder="商品规格" />
          <Input placeholder="商品规格" />
        </Space.Compact>
        <Select
          placeholder="商品分类"
          onChange={onChange3}
          style={{ margin: "20px 10px 0 0", width: "30vh" }}
          options={[
            {
              value: "蔬菜",
              label: "蔬菜",
            },
            {
              value: "肉类",
              label: "肉类",
            },
            {
              value: "豆制品",
              label: "豆制品",
            },
          ]}
        />
        <Space.Compact style={{ margin: "0 10px 0 0" }}>
          <Input placeholder="商品现价" />
          <Input placeholder="商品现价" />
        </Space.Compact>
        <Space.Compact>
          <Input placeholder="商品原价" />
          <Input placeholder="商品原价" />
        </Space.Compact>
        <div style={{ display: "inline-block" }}>
          <Button style={{ margin: "0 10px 0 10px" }}>查询</Button>
          <Button>重置</Button>
        </div>
        <Link to="/product/manager/add">
          <Button
            style={{ marginTop: "50px", float: "right", marginRight: "100px" }}
          >
            新增商品
          </Button>
        </Link>
      </div>
      <div>
        <div style={{ marginTop: "30px" }}>查询结果: 共计4条数据</div>
        <Table rowKey={(({_id})=>_id)} columns={columns} dataSource={paginatedData} />
        <Pagination {...paginationConfig} />
      </div>
    </>
  );
}

export default function Manager({ route: { routes } }) {
  return (
    <>
      <Route exact path="/product/manager" component={ManagerContent} />
      {/* 
      <Switch>
        <Route path="/product/manager/add" component={Add} />
      </Switch>
     */}
      {renderRoutes(routes)}
    </>
  );
}
